<template>
  <view>
    <view class="margin">
      <!-- 1 -->
      <view class="flex-cen margin ms10">
        <u-search :showAction="false" placeholder="搜索疾病、症状、商品、内容" disabled v-model="form.content" :clearabled="true"
          searchIconColor="#7976E9" borderColor="#DDDDDD" bgColor="#ffffff"></u-search>
      </view>
      <!-- 2 -->
      <view class="flex-cen">
        <view class="flexflex flex-align justif-between relative ms20" ref="top">
          <u-tabs u-sticky :list="list1" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }" :inactiveStyle="{
  color: '#606266',
  transform: 'scale(1)',
}" itemStyle="padding-left: 60rpx; padding-right: 60rpx;height:88rpx" :current="currentTab"
            @click="click"></u-tabs>
        </view>
      </view>
      <!-- 3 -->
      <view class="">
        <!-- 群 人 -->
        <swiper :current="currentTab" @change="swiperChange" @transition="transition" @animationfinish="animationfinish"
          :style="{ height: boxHeight }">
          <swiper-item class="swiper-item">
            <scroll-view scroll-y :style="{ height: boxHeight }" @scrolltolower="onreachBottom">
              <view class="margin" v-for="(val, i) in doctorList" :key="i" @click="
                $pub.go(
                  `/pages_home/createOrder/createOrder?data=${encodeURIComponent(
                    JSON.stringify(val)
                  )}`
                )
                ">
                <view class="item1 u-border-bottom mt10" style="display: flex">
                  <view class="mr10">
                    <u-avatar src="/static/img/finddoctor/02-yishen.png"></u-avatar>
                  </view>
                  <view class="" style="width: 100%">
                    <u-row :gutter="5">
                      <u-col span="3">
                        <view class="demo-layout bg-purple-light">
                          <view class="size_16 font_b">{{
                            val.uname || "默认用户"
                          }}</view>
                        </view>
                      </u-col>
                      <u-col span="9">
                        <view class="demo-layout bg-purple">
                          <view class="size_14">{{
                            val.utechp || "副主任医师"
                          }}</view>
                        </view>
                      </u-col>
                    </u-row>
                    <u-row class="mt8 ms10">
                      <u-col span="8">
                        <view class="demo-layout bg-purple-light">
                          <view class="size_14">{{
                            val.ucompname || "北京第二人民医院"
                          }}</view>
                        </view>
                      </u-col>
                      <u-col span="4">
                        <view class="demo-layout bg-purple">
                          <view class="size_14">{{
                            val.udepartmentname || "外科"
                          }}</view>
                        </view>
                      </u-col>
                    </u-row>
                    <view class="size_12 color_84 ms20 text-ellipsis">
                      {{
                        val.introduction ||
                        "1擅长治疗内科消化系统疾病如：萎缩性胃炎、肥大性胃炎、浅表性胃炎、急慢性胆囊炎、急慢性胰腺炎、肝炎、肝硬化等疑难杂症。"
                      }}
                    </view>
                  </view>
                </view>
              </view>
              <u-loading-icon :show="load"></u-loading-icon>
            </scroll-view>
          </swiper-item>
          <swiper-item class="swiper-item">
            <scroll-view scroll-y :style="{ height: boxHeight }" @scrolltolower="onreachBottom">
              <block class="">
                <view class="item u-border-bottom py-20" @click="
                  $pub.go(
                    `/pages_home/hosDetail/hosDetail?data=${encodeURIComponent(
                      JSON.stringify(v)
                    )}`
                  )
                  " v-for="(v, i) in hosList" :key="i">
                  <u-row>
                    <u-col span="10">
                      <view class="flex-column">
                        <h3 class="ms10 text-ellipsis">
                          {{
                            v.ucompname || "六合院横梁街道黄中社区卫生服务站"
                          }}
                        </h3>
                        <view class="size_12 color_84 text-ellipsis">
                          {{
                            v.uaddress ||
                            "江苏省南京市六合区横梁街道黄中社区1111"
                          }}
                        </view>
                      </view>
                    </u-col>
                    <u-col span="2">
                      <view class="">
                        <u-tag text="未知" size="mini" type="success"></u-tag>
                      </view>
                    </u-col>
                  </u-row>
                </view>
                <u-loading-icon :show="load"></u-loading-icon>
              </block>
            </scroll-view>
          </swiper-item>
          <swiper-item class="swiper-item">
            <scroll-view scroll-y :style="{ height: boxHeight }" @scrolltolower="onreachBottom">
              <block class="">
                <!-- @click="$pub.go(`/pages/goodsDetail/goodsDetail?data=${encodeURIComponent(JSON.stringify(v))}`)" -->
                <view class="item u-border-bottom py-20" @click="
                  $pub.go(
                    `/pages_shop/goodsDetail/goodsDetail?data=${v.uproductid}`
                  )
                  " v-for="(v, i) in goodsList" :key="i">
                  <u-row>
                    <u-col span="10">
                      <view class="flex-column">
                        <h3 class="ms10 text-ellipsis">
                          {{ v.uproductName || "天麻胶囊" }}
                        </h3>
                        <view class="size_12 color_84 text-ellipsis">
                          {{ v.ucompname || "吉林省中月制药有限公司" }}
                        </view>
                      </view>
                    </u-col>
                    <u-col span="2">
                      <view class="">
                        <u-tag v-if="true" text="处方" size="mini" type="error"></u-tag>
                        <u-tag v-else text="非处方" size="mini" type="warning"></u-tag>
                      </view>
                    </u-col>
                  </u-row>
                </view>
                <u-loading-icon :show="load"></u-loading-icon>
              </block>
            </scroll-view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
import utils from "@/utils/utils.js";
export default {
  data() {
    return {
      list1: [
        {
          name: "医生",
          id: 0,
        },
        {
          name: "医院",
          id: 1,
        },
        {
          name: "药品",
          id: 2,
        },
      ],
      currentTab: 0,
      swiperCurrent: 0,
      /* 高 */
      boxHeight: "80vh",
      /* 搜素 */
      load: false,
      doctorList: [],
      hosList: [],
      goodsList: [],
      form: {
        content: null,
        type: 1,
      },
    };
  },
  methods: {
    /* 切换 */
    swiperChange(e) {
      // console.log(e, "e");
      console.log(22, e.detail.current);
      let index = e.detail.current;
      this.tabschange(index);
      /* 修改类型 */
      switch (e.detail.current) {
        case 0:
          this.form.type = 1;
          /* 调用请求 */
          // this.searchType()
          utils.AjaxShake(this.searchType, 1000);
          break;
        case 1:
          this.form.type = 2;
          /* 调用请求 */
          // this.searchType()
          utils.AjaxShake(this.searchType, 1000);
          break;
        case 2:
          this.form.type = 3;
          /* 调用请求 */
          // this.searchType()
          utils.AjaxShake(this.searchType, 1000);
          break;
        default:
          break;
      }
    },
    tabschange(id) {
      // console.log(id, "id");
      this.currentTab = id;
    },
    click(item) {
      // console.log(item, "item");
      this.currentTab = item.index;
    },
    transition() { },
    animationfinish() { },
    onreachBottom() { },
    /* 请求 */
    async searchType() {
      console.log("请求执行力");
      this.load = true;
      let re = await this.$API.searchApi.searchType(this.form);
      if (this.form.type == "1") {
        this.doctorList = re;
      } else if (this.form.type == "2") {
        this.hosList = re;
      } else if (this.form.type == "3") {
        this.goodsList = re;
      } else {
        console.log("没有类型");
      }
      this.load = false;
    },
  },
  onLoad(options) {
    console.log(options);
    if (options.data) {
      let data = options.data;
      this.form.content = data;
    }
  },
  onShow() {
    uni.getSystemInfo({
      success: (res) => {
        let topHeight = this.$refs.top.$el.offsetHeight;
        let winHeight = res.windowHeight;
        // console.log(this.$refs.top);
        // console.log(this.$refs.top.$el);
        // console.log(this.$refs.top.$el.offsetHeight);
        // console.log(topHeight, "topHeight");
        // console.log(winHeight, "winHeight");
        // boxHeight为 屏幕高度 - 顶部高度
        console.log(this.boxHeight, "boxHeight");
        this.boxHeight = winHeight - topHeight + "px";
        console.log(this.boxHeight, "boxHeight");
      },
    });
    /*  */
    this.searchType();
  },
};
</script>

<style lang="scss">
/* #ifdef MP */
::v-deep .u-search__content__input {
  font-size: 28rpx !important;
}

/* #endif */
.count {
  height: 20 + 10px;
}
</style>